<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>bgColor</view>
				<view>String</view>
				<view>无</view>
				<view>展示面板背景色，可使用rgba</view>
			</view>
			<view class="tr">
				<view>dataSet</view>
				<view>String</view>
				<view>无</view>
				<view>图片的网络地址</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>Number</view>
				<view>1</view>
				<view>初始放大倍数</view>
			</view>
			<view class="tr">
				<view>min</view>
				<view>Number</view>
				<view>0.5</view>
				<view>图片缩放最小倍数</view>
			</view>
			<view class="tr">
				<view>max</view>
				<view>Number</view>
				<view>4</view>
				<view>图片缩放最大倍数</view>
			</view>
			<view class="tr">
				<view>step</view>
				<view>Number</view>
				<view>0.5</view>
				<view>每次点击缩放按钮变更的倍数</view>
			</view>
			<view class="tr">
				<view>screenFix</view>
				<view>Boolean</view>
				<view>true</view>
				<view>屏幕适配，旋转后放大到满屏</view>
			</view>
			<view class="tr">
				<view>animation</view>
				<view>Boolean</view>
				<view>true</view>
				<view>过渡动画，如果观测到异常，可关闭动画</view>
			</view>
			<view class="tr">
				<view>space</view>
				<view>Number, String</view>
				<view>0</view>
				<view>图片留边，只支持rpx、px单位，数字默认单位rpx</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>toolbar</view>
					<view>Array, Object</view>
					<view>无</view>
					<view>工具按钮设置</view>
				</view>
				<view class="appendix">
					格式：{按钮名:true/false} 或 [按钮名, ...]
					<view>scale：true　缩放按钮</view>
					<view>rotate：false　旋转按钮</view>
					<view>turn：true　翻转按钮</view>
					<view>page：false　翻页按钮</view>
					<view>save：false　保存图片按钮</view>
					<view>翻转按钮开启后，旋转按钮将强制关闭</view>
				</view>
			</view>
			<view class="tr">
				<view>buttonSize</view>
				<view>String</view>
				<view>44rpx</view>
				<view>工具按钮大小，需带单位</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>icon</view>
					<view>Object</view>
					<view></view>
					<view>iconfont图标数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"图标名"}
					<view>save：icon-download 保存图片</view>
					<view>restore：icon-restore 还原</view>
					<view>enlarge：icon-enlarge 放大</view>
					<view>shrink：icon-shrink 缩小</view>
					<view>turnLeft：icon-rotate-left 逆时针转</view>
					<view>turnRight：icon-rotate-right 顺时针转</view>
					<view>turn：icon-rotate-screen 翻转</view>
					<view>prev：icon-prev 上一张</view>
					<view>next：icon-next 下一张</view>
					<view>close：icon-close-circular 关闭</view>
				</view>
			</view>
			<view class="tr">
				<view>buttonCustom</view>
				<view>Array</view>
				<view>无</view>
				<view>自定义按钮组，格式{ icon:"", event:"", name:"", close:false }。详细见下方</view>
			</view>
			<view class="tr">
				<view>params</view>
				<view>any</view>
				<view>无</view>
				<view>自定义按钮携带参数，随点击事件一并提交</view>
			</view>
			<view class="tr">
				<view>longPressTime</view>
				<view>Number</view>
				<view>1500</view>
				<view>长按图片触发事件间隔时间，单位毫秒</view>
			</view>
			<view class="tr">
				<view>maskClick</view>
				<view>Boolean</view>
				<view>true</view>
				<view>点击遮罩关闭放大器，如果不启用则出现关闭按钮</view>
			</view>
			<view class="tr">
				<view>describe</view>
				<view>String</view>
				<view>无</view>
				<view>图片描述，可带html结构</view>
			</view>
			<view class="tr">
				<view>desClass</view>
				<view>String</view>
				<view>无</view>
				<view>图片描述样式名，只对全局样式或穿透样式有效</view>
			</view>
			<view class="tr">
				<view>desFontSize</view>
				<view>String</view>
				<view>无</view>
				<view>图片描述字体大小，需带单位</view>
			</view>
			<view class="tr">
				<view>desMaxRow</view>
				<view>Number</view>
				<view>4</view>
				<view>图片描述显示行数</view>
			</view>
			<view class="tr">
				<view>desLineHeight</view>
				<view>Number</view>
				<view>1.5</view>
				<view>图片描述文字行高</view>
			</view>
			<view class="tr">
				<view>desTrigger</view>
				<view>Number</view>
				<view>30</view>
				<view>图片描述下拉打开关闭的触点滑动触发距离</view>
			</view>
			<view class="tr">
				<view>autoCenter</view>
				<view>Boolean</view>
				<view>true</view>
				<view>图片缩放后自动居中，H5可用。微信小程序存在不可解决的兼容问题</view>
			</view>
			<view class="tr">
				<view>top</view>
				<view>String</view>
				<view>无</view>
				<view>顶部手动偏移，影响描述文字的位置。偏移量已默认加上顶部状态栏高度。</view>
			</view>
			<view class="tr">
				<view>zIndex</view>
				<view>Number</view>
				<view>999</view>
				<view>组件层级</view>
			</view>
			<view class="tr">
				<view>@close</view>
				<view>事件</view>
				<view>	</view>
				<view>放大器关闭事件，无提交参数</view>
			</view>
			<view class="tr">
				<view>@click</view>
				<view>事件</view>
				<view>	</view>
				<view>图片点击事件，提交图片地址</view>
			</view>
			<view class="tr">
				<view>@longPress</view>
				<view>事件</view>
				<view>	</view>
				<view>图片长按事件，提交图片地址</view>
			</view>
			<view class="tr">
				<view>@prev</view>
				<view>事件</view>
				<view>	</view>
				<view>翻页按钮点击事件，上一张</view>
			</view>
			<view class="tr">
				<view>@next</view>
				<view>事件</view>
				<view>	</view>
				<view>翻页按钮点击事件，下一张</view>
			</view>
			<view class="tr">
				<view>@event</view>
				<view>事件</view>
				<view>	</view>
				<view>自定义按钮点击事件，提交对象参数，包含event：定义的按钮事件名；image：图片地址；params：自定义参数传递</view>
			</view>
		</view>
		
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：
				<view class="mb-sm">
					{{"&lt;vi-image-enlarge ref='组件id' :dataSet='图片地址'>&lt;/vi-image-enlarge>"}}
				</view>
				使用refs调用组件的open方法打开
			</view>
			<view class="py-sm">
				<vi-image-enlarge ref="demo1" :dataSet="image" :describe="describe"></vi-image-enlarge>
				<vi-button @click="openWin('demo1')">默认示例</vi-button>
			</view>
			<view class="py-sm">
				关于自定义按钮，prop属性btnCustom传入按钮对象数组，按钮对象格式：
				<view class="" v-html="'{'"></view>
				<view class="ml-e2">icon:"",</view>
				<view class="ml-e2">event:"",</view>
				<view class="ml-e2">name:"",</view>
				<view class="ml-e2">close:false,</view>
				<view class="mb-md" v-html="'}'"></view>
				<view class="">
					icon：按钮图标，iconfont的图标名，需全局定义iconfont图标
				</view>
				<view class="mb-sm">
					event：按钮事件名，组件使用@event接收自定义按钮事件，提交一个数据对象，包含：
					<view class="ml-e2">"event"：按钮事件名</view>
					<view class="ml-e2">"image"：当前图片地址</view>
					<view class="ml-e2">"params"：携带参数，转交props传入的params参数</view>
				</view>
				<view class="">
					name：以文字作为按钮图标，icon为空时有效，默认"按钮"
				</view>
				<view class="mb-md">
					close：按钮点击后是否关闭放大器，默认false
				</view>
				<vi-image-enlarge ref="demo3" :dataSet="image" :buttonCustom="[{ icon:'', event:'事件1', name:'自定', close:false }]" @event="showMsg"></vi-image-enlarge>
				<vi-button @click="openWin('demo3')">自定义按钮示例</vi-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				image:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqq.yh31.com%2Ftp%2Ffj%2F202108070936229961.jpg&refer=http%3A%2F%2Fqq.yh31.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644541056&t=6e0b80671e1bc2661056535b90a9895a",
				describe:'<p class="indent2">这是带结构的描述</p><p class="indent2">这是带结构的描述</p>'
				
			}
		},
		methods: {
			showMsg(e){
				console.log(e);
				this.showTips(e.event + " | " + e.data)
			}
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
